<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
      <el-button class="btn-add" @click="dialogVisible = true" size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="productCateTable"
        style="width: 100%"
        :data="list"
        v-loading="listLoading"
        border
      >
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.categoriesId }}</template>
        </el-table-column>
        <el-table-column label="分类名称" align="center">
          <template slot-scope="scope">{{ scope.row.classname }}</template>
        </el-table-column>
        <el-table-column label="级别" width="100" align="center">
          <template slot-scope="scope"
            ><el-tag
              effect="plain"
              :type="scope.row.CategoriesList == null ? '' : 'success'"
            >
              {{ scope.row.CategoriesList == null ? "二级" : "一级" }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="商品数量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.productCount }}</template>
        </el-table-column> -->
        <el-table-column label="数量单位" width="100" align="center">
          <template>本</template>
        </el-table-column>
        <!-- <el-table-column label="导航栏" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleNavStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.navStatus"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="是否显示" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleShowStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.flag"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排序" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sort }}</template>
        </el-table-column> -->
        <el-table-column label="设置" width="230" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              v-show="scope.row.CategoriesList != null"
              :disabled="scope.row.CategoriesList == null"
              @click="handleShowNextLevel(scope.$index, scope.row)"
              >查看下级
            </el-button>
            <el-button
              size="mini"
              type="info"
              v-show="scope.row.CategoriesList == null"
              :disabled="scope.row.CategoriesList < 0"
              @click="handleShowoutLevel(scope.$index, scope.row)"
              >查看上级
            </el-button>
            <el-button
              size="mini"
              @click="handleTransferProduct(scope.$index, scope.row)"
              >转移商品
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      @open="add"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称">
          <el-input v-model="ruleForm.categoriesName"></el-input>
        </el-form-item>
        <el-form-item label="选择父级" prop="region">
          <el-select v-model="ruleForm.classifyId" placeholder="请选择父级分类">
            <el-option
              :label="item.classname"
              :value="item.categoriesId"
              v-for="item in productCateOptions"
              :key="item.categoriesId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addclassify">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改分类名称"
      :visible.sync="dialogVisible_1"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm_1"
        ref="ruleForm_1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧分类名">
          <el-input v-model="ruleForm_1.oldCategoriesName"></el-input>
        </el-form-item>
        <el-form-item label="新分类名">
          <el-input v-model="ruleForm_1.newCategoriesName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_1 = false">取 消</el-button>
        <el-button type="primary" @click="editend">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
// import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
import {
  get_classifylist,
  add_classify,
  del_classify,
  edit_classify,
} from "@/api/book";
export default {
  name: "productCateList",
  data() {
    return {
      ruleForm: {
        categoriesName: "",

        classifyId: "",
        topImage: "2",
      },
      ruleForm_1: {
        newCategoriesName: "",
        oldCategoriesName: "",
      },
      dialogVisible: false,
      dialogVisible_1: false,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      productCateOptions: [],
      classname: "",
      parentId: 0,
    };
  },
  created() {
    this.resetParentId();
    this.getList();
  },
  watch: {
    $route(route) {
      // this.resetParentId();
      // this.getList();
      console.log(this.$route.query.id);
      let id = this.$route.query.id;
      console.log(this.list[id]);
      let lists = this.list[id].CategoriesList;
      this.list = lists;
      console.log(lists);
    },
  },
  methods: {
    resetParentId() {
      this.listQuery.pageNum = 1;
      if (this.$route.query.parentId != null) {
        this.parentId = this.$route.query.parentId;
      } else {
        this.parentId = 0;
      }
    },
    handleAddProductCate() {
      this.$router.push("/pms/addProductCate");
    },
    getList() {
      this.listLoading = true;
      get_classifylist().then((response) => {
        this.listLoading = false;
        this.list = response.data.data;
        arr = response.data.data;
      });
    },
    add() {
      get_classifylist().then((response) => {
        console.log(response);

        this.productCateOptions = response.data.data;
        this.productCateOptions.push({ classname: "无父级分类" });
        console.log(this.productCateOptions);
      });
    },
    addclassify() {
      console.log(this.ruleForm.categoriesName);
      console.log(this.ruleForm.classifyId);
      let params = new URLSearchParams();
      params.append("categoriesName", this.ruleForm.categoriesName);
      params.append("classifyId", this.ruleForm.classifyId);
      params.append("topImage", 1);

      add_classify(params).then((response) => {
        console.log(response);
        this.dialogVisible = false;
        this.getList();
      });
    },
    edit(index, row) {
      this.dialogVisible_1 = true;
      this.ruleForm_1.oldCategoriesName = row.classname;
    },
    editend() {
      let params = new URLSearchParams();
      params.append("oldCategoriesName", this.ruleForm_1.oldCategoriesName);
      params.append("newCategoriesName", this.ruleForm_1.newCategoriesName);
      edit_classify(params).then((response) => {
        console.log(response);
        this.dialogVisible_1 = false;
        this.getList();
      });
    },

    delclass() {
      let params = new URLSearchParams();
      console.log(this.ruleForm_1.oldCategoriesName);
      params.append("categoriesName", this.ruleForm_1.oldCategoriesName);

      del_classify(this.ruleForm_1.oldCategoriesName).then((response) => {
        console.log(response);
        this.dialogVisible_1 = false;
        this.getList();
      });
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleNavStatusChange(index, row) {
      let data = new URLSearchParams();
      let ids = [];
      ids.push(row.id);
      data.append("ids", ids);
      data.append("navStatus", row.navStatus);
      updateNavStatus(data).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleShowStatusChange(index, row) {
      let data = new URLSearchParams();
      let ids = [];
      ids.push(row.id);
      data.append("ids", ids);
      data.append("showStatus", row.showStatus);
      updateShowStatus(data).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleShowNextLevel(index, row) {
      console.log(row.categoriesId);
      this.$router.push({
        path: "/books/book_classify",
        query: { id: row.categoriesId - 1 },
      });

      console.log(this.list);
    },
    handleShowoutLevel() {
      this.$router.push({ path: "/books/book_classify" });
      this.getList();
    },
    handleTransferProduct(index, row) {
      console.log("handleAddProductCate");
    },
    handleUpdate(index, row) {
      this.$router.push({
        path: "/pms/updateProductCate",
        query: { id: row.id },
      });
    },
    handleDelete(index, row) {
      console.log(row.classname);
      this.$confirm("是否要删除该品牌", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("categoriesName", row.classname);
        console.log(params);
        // axios
        //   .delete(
        //     "/fl-categories/deleteCategories" +
        //       row.classname
        //   )
        //   .then((response) => {
        //     console.log(response);
        //     this.$message({
        //       message: "删除成功",
        //       type: "success",
        //       duration: 1000,
        //     });
        //     this.getList();
        //   });
        del_classify( params).then((response) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          console.log(response);
          this.getList();
        });
      });
    },
  },
  filters: {
    levelFilter(value) {
      if (value === 0) {
        return "一级";
      } else if (value === 1) {
        return "二级";
      }
    },
    disableNextLevel(value) {
      if (value === 0) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped></style>
